import echarts from 'echarts'
import _ from 'lodash'
class STOPECHSRTD {
  // 稍后弄成对象的形式
  constructor ({
    xValue,
    causeValue,
    percentage,
    isDisabled,
    id // 区分不良与停机
  }) {
    this.isDisabled = !isDisabled
    this.xValue = xValue // 横向坐标参数
    this.causeValue = causeValue // 原因数值
    // 百分比
    this.percentage = percentage
    this.maxValue = _.max(causeValue)
    // 不良
    this.bgColor = id === '数量' ? '#F7B82D' : '#FF8559'
    this.option = {
      backgroundColor: '#FFFFFF',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        },
        formatter: (params) => {
          const ret = id === '数量' ? 'rgba(227,170,46,1)' : 'rgba(234,125,85,1)'
          const itemText = id === '数量' ? params[0].name : params[0].name
          return `<div style="width:10px;
                        height:10px;
                        background:linear-gradient(180deg,rgba(68,216,198,1),rgba(95,119,253,1));
                        border-radius:5px;
                        float:left;
                        margin-top:5px;
                        margin-right:3px"></div>` + params[0].seriesName + ' : ' + itemText + '<br/>' +
                  `<div style="width:10px;
                        height:10px;
                        background:${ret};
                        border-radius:5px;
                        float:left;
                        margin-top:5px;
                        margin-right:3px"></div>` + params[1].seriesName + ':' + params[1].value + '%'
        }
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: 0,
          // yAxisIndex: 0,
          disabled: this.isDisabled
        }
      ],
      grid: {
        left: '3%',
        right: '1%',
        bottom: 10,
        containLabel: true
      },
      // legend: {
      //   // right: 10
      // },
      xAxis: {
        data: this.xValue,
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            color: '#D3D3D3'
          }
        },
        axisTick: {
          show: false // 隐藏X轴刻度
        },
        triggerEvent: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#333333' // X轴文字颜色
          },
          formatter: function (value) {
            const v = value.length > 20 ? value.substr(0, 10) + '...' : value
            return v.indexOf('/') > -1 ? v.split('/').join('/\n') : v
          }
        }

      },
      yAxis: [{
        type: 'value',
        name: id,
        nameTextStyle: {
          color: '#333333'
        },
        axisTick: {
          show: false
        },
        min: 0,
        max: this.maxValue,
        splitNumber: 5,
        interval: Number(((this.maxValue - 0) / 5).toFixed(2)),
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333333'
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#333333'
          }
        },
        splitLine: {
          show: false
        }
      },
      {
        type: 'value',
        name: '累计百分比',
        min: 0,
        max: 100,
        interval: 20,
        nameTextStyle: {
          color: '#333333'
        },
        position: 'right',
        splitLine: { // y轴分割线样式
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: true,
          formatter: '{value} %', // 右侧Y轴文字显示
          textStyle: {
            color: '#333333'
          }
        }
      }
      ],
      series: [
        {
          name: '原因',
          type: 'bar',
          barWidth: 16,
          label: {
            show: false,
            position: 'top'
          },
          itemStyle: {
            normal: {
              barBorderRadius: [6, 6, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00FFE3'
              },
              {
                offset: 1,
                color: '#4693EC'
              }
              ])
            }
          },
          data: this.causeValue
        }, {
          name: '累计百分比',
          type: 'line',
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: false, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          // 标记的图形为实心圆
          symbolSize: 6.5, // 标记的大小
          itemStyle: {
          // 折线拐点标志的样式
            normal: {
              color: this.bgColor,
              borderWidth: 3,
              borderColor: this.bgColor
            }
          },
          lineStyle: {
            normal: {
              width: 3,
              color: this.bgColor
            }
          },
          data: this.percentage
        }
      ]
    }
  }
}
export default STOPECHSRTD
